<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>hello world fresh deno</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="shortcut icon " type="images/x-icon" href="./favicon.ico" />
        <link rel="stylesheet" href="./styles.css" />
        <script src="/registerSW.js" defer></script>
    </head>

    <body>
        <div class="px-4 py-8 mx-auto bg-[#86efac]">
            <div
                class="max-w-screen-md mx-auto flex flex-col items-center justify-center"
            >
                <img
                    class="my-6"
                    src="./logo.svg"
                    width="128"
                    height="128"
                    alt="the Fresh logo: a sliced lemon dripping with juice"
                />
                <h1 class="text-4xl font-bold">Welcome to Fresh</h1>
                <p class="my-4">
                    Try updating this message in the<code class="mx-2"
                    >./routes/index.tsx</code>
                    file, and refresh.
                </p>
                <div class="flex gap-8 py-6">
                    <button
                        class="px-2 py-1 border-gray-500 border-2 rounded bg-white hover:bg-gray-200 transition-colors"
                    >
                        -1
                    </button>
                    <p class="text-3xl tabular-nums">3</p>
                    <button
                        class="px-2 py-1 border-gray-500 border-2 rounded bg-white hover:bg-gray-200 transition-colors"
                    >
                        +1
                    </button>
                </div>
            </div>
        </div>
        <img src="./hero.webp" style="width: 100%" />
    </body>
</html>
